<!-- vue 3 引入百度api -->
<template>
  <div id="allMap"></div>
</template>

<script setup>
import {
  defineProps,
  nextTick,
  defineEmits,
  watch,
  reactive
} from "vue";

const emit = defineEmits(["mark"]);

const props = defineProps({
  info: {
    type: Object
  }
});

watch(
  () => props,
  () => {
    nextTick(() => {
      initMap();
    });
  },
  { immediate: true, deep: true }
);

const status = reactive({
  Bmap: null,
  map: null,
  point: null,
  marker: null
});

const initMap = () => {
  status.Bmap = window.BMap;
  status.map = new status.Bmap.Map("allMap");
  status.point = new status.Bmap.Point(props.info.lon, props.info.lat);
  status.map.centerAndZoom(status.point, 12);
  status.map.enableScrollWheelZoom(true);
  status.marker = new status.Bmap.Marker(status.point); // 创建标注
  status.map.addOverlay(status.marker); // 将标注添加到地图中
  if (props.info.type === "edit") {
    status.map.addEventListener("click", function (e) {
      status.marker.remove();
      status.marker = new status.Bmap.Marker(
        new status.Bmap.Point(e.point.lng, e.point.lat)
      );
      status.map.addOverlay(status.marker);
      console.log(e.point)
      emit("mark", e.point);
    });
  }
};
</script>
<style scoped>
#allMap {
  width: 100%;
  height: 400px;
}
</style>
